<script lang="ts" setup>
// import { getKind } from '@/api/kind';
import { ref, computed } from 'vue'
import type { Ref } from 'vue'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue';

const router = useRouter()

interface IPro {
    img: string
    title: string
    number: string
    des: string
    proid: string
    proname: string
}
// const kindlist: Ref<IPro[]> = ref([])

// onMounted(() => {
//     getKind().then(res => {
//         console.log(res.data);
//         kindlist.value = res.data
//     })
// })
function onClickLeft() {
    router.back()
}

</script>
<template>
    <div class="box">
        <header>
            <!-- <van-icon name="arrow-left" size="20" @click="$router.back()"/>
                                                                    <span>
                                                                        衬衫
                                                                    </span> -->
            <van-nav-bar title="衬衫" left-text="返回" left-arrow @click-left="onClickLeft" />

        </header>
        <ul class="cols_2">
            <li v-for="item in 50 " class="proItem">
                <div class="itemImage">
                    <van-image />
                </div>
                <div class="itemInfo">
                    <div class="proname van-multi-ellipsis--l2">1 </div>
                    <div class="price">5.00</div>
                </div>
            </li>
        </ul>
    </div>
</template>
<style scoped lang="scss">
/* 上图下文 */
.box {
    font-size: 12px;
}

.cols_2 {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
}

.cols_2 .proItem {
    width: 48%;
    margin: 3px 1%;
    border: 1px solid rgb(209, 206, 206);
    box-sizing: border-box;
}

.cols_2 .proItem .itemImage {
    width: 100%;
    height: 2rem;
}

.cols_2 .proItem .itemImage .van-image {
    width: 100%;
    height: 100%;
}

.cols_2 .proItem .itemInfo {
    line-height: 22px;
    padding: 5px 10px;
    box-sizing: border-box;
}

// /* 切换按钮的样式 */
// .changIcon {
//   position: fixed;
//   bottom: 65px;
//   right: 15px;
//   width: 36px;
//   height: 36px;
//   border: 1px solid gray;
//   border-radius: 50%;
//   background-color: #fff;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }
</style>